<template>
  <div class="p-2">
    <el-card shadow="hover">
      <template #header>
        <div class="card-header">
          <span>入住流程审核</span>
        </div>
      </template>

      <!-- 搜索表单 -->
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="老人ID" prop="elderId">
          <el-input v-model="queryParams.elderId" placeholder="请输入老人ID" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="审核状态" prop="reviewStatus">
          <el-select v-model="queryParams.reviewStatus" placeholder="请选择审核状态" clearable>
            <el-option label="待审核" value="待审核" />
            <el-option label="已通过" value="已通过" />
            <el-option label="已驳回" value="已驳回" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">
            <el-icon><search /></el-icon>搜索
          </el-button>
          <el-button @click="resetQuery">
            <el-icon><refresh /></el-icon>重置
          </el-button>
        </el-form-item>
      </el-form>

      <!-- 数据表格 -->
      <el-table v-loading="loading" :data="admissionProcessList">
        <el-table-column label="流程ID" align="center" prop="processId" />
        <el-table-column label="老人ID" align="center" prop="elderId" />
        <el-table-column label="当前步骤" align="center" prop="step" />
        <el-table-column label="状态" align="center" prop="status" />
        <el-table-column label="审核状态" align="center" prop="reviewStatus">
          <template #default="scope">
            <el-tag v-if="scope.row.reviewStatus === '待审核'" type="warning">待审核</el-tag>
            <el-tag v-else-if="scope.row.reviewStatus === '已通过'" type="success">已通过</el-tag>
            <el-tag v-else-if="scope.row.reviewStatus === '已驳回'" type="danger">已驳回</el-tag>
            <span v-else>{{ scope.row.reviewStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核人" align="center" prop="reviewerName" />
        <el-table-column label="审核时间" align="center" prop="reviewTime">
          <template #default="scope">
            <span>{{ parseTime(scope.row.reviewTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template #default="scope">
            <el-button v-if="scope.row.reviewStatus === '待审核'" type="primary" link @click="handleReview(scope.row, '已通过')">
              通过
            </el-button>
            <el-button v-if="scope.row.reviewStatus === '待审核'" type="danger" link @click="handleReview(scope.row, '已驳回')">
              驳回
            </el-button>
            <el-button type="primary" link @click="handleDetail(scope.row)">
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </el-card>

    <!-- 审核对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
      <el-form ref="reviewFormRef" :model="reviewForm" :rules="reviewRules" label-width="100px">
        <el-form-item label="审核状态">
          <el-tag v-if="reviewForm.reviewStatus === '已通过'" type="success">已通过</el-tag>
          <el-tag v-else-if="reviewForm.reviewStatus === '已驳回'" type="danger">已驳回</el-tag>
        </el-form-item>
        <el-form-item label="审核意见" prop="reviewComments">
          <el-input v-model="reviewForm.reviewComments" type="textarea" :rows="4" placeholder="请输入审核意见" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialog.visible = false">取 消</el-button>
          <el-button type="primary" @click="submitReview">确 定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog title="入住流程详情" v-model="detailDialog.visible" width="700px" append-to-body>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="流程ID">{{ detailForm.processId }}</el-descriptions-item>
        <el-descriptions-item label="老人ID">{{ detailForm.elderId }}</el-descriptions-item>
        <el-descriptions-item label="当前步骤">{{ detailForm.step }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ detailForm.status }}</el-descriptions-item>
        <el-descriptions-item label="开始时间">{{ parseTime(detailForm.startTime) }}</el-descriptions-item>
        <el-descriptions-item label="完成时间">{{ parseTime(detailForm.endTime) }}</el-descriptions-item>
        <el-descriptions-item label="经办人">{{ detailForm.handler }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ detailForm.remarks }}</el-descriptions-item>
        <el-descriptions-item label="审核状态">
          <el-tag v-if="detailForm.reviewStatus === '待审核'" type="warning">待审核</el-tag>
          <el-tag v-else-if="detailForm.reviewStatus === '已通过'" type="success">已通过</el-tag>
          <el-tag v-else-if="detailForm.reviewStatus === '已驳回'" type="danger">已驳回</el-tag>
          <span v-else>{{ detailForm.reviewStatus }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="审核人">{{ detailForm.reviewerName }}</el-descriptions-item>
        <el-descriptions-item label="审核时间" :span="2">{{ parseTime(detailForm.reviewTime) }}</el-descriptions-item>
        <el-descriptions-item label="审核意见" :span="2">{{ detailForm.reviewComments }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="detailDialog.visible = false">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="AdmissionProcessReview" lang="ts">
import { listAdmissionProcess, reviewAdmissionProcess } from '@/api/nursing/admissionProcess';
import { AdmissionProcessVO, AdmissionProcessQuery } from '@/api/nursing/admissionProcess/types';
import { getCurrentInstance, reactive, ref, onMounted } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';

const { proxy } = getCurrentInstance() as any;

// 列表数据
const loading = ref(false);
const total = ref(0);
const admissionProcessList = ref<AdmissionProcessVO[]>([]);

// 查询参数
const queryParams = reactive<AdmissionProcessQuery>({
  pageNum: 1,
  pageSize: 10,
  elderId: undefined,
  reviewStatus: '待审核', // 默认查询待审核的记录
});

// 审核对话框
const dialog = reactive({
  visible: false,
  title: '审核入住流程'
});

// 详情对话框
const detailDialog = reactive({
  visible: false
});

// 审核表单
const reviewFormRef = ref<FormInstance>();
const reviewForm = reactive({
  processId: undefined,
  reviewStatus: '',
  reviewComments: ''
});

// 详情表单
const detailForm = reactive<AdmissionProcessVO>({} as AdmissionProcessVO);

// 表单校验规则
const reviewRules = reactive<FormRules>({
  reviewComments: [
    { required: true, message: '请输入审核意见', trigger: 'blur' },
    { min: 2, max: 200, message: '审核意见长度在 2 到 200 个字符', trigger: 'blur' }
  ]
});

/** 查询入住流程记录列表 */
const getList = async () => {
  try {
    loading.value = true;
    const res = await listAdmissionProcess(queryParams);
    admissionProcessList.value = res.rows;
    total.value = res.total;
  } catch (error) {
    console.error('获取入住流程记录列表失败', error);
    proxy.$modal.msgError('获取入住流程记录列表失败');
  } finally {
    loading.value = false;
  }
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNum = 1;
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryParams.elderId = undefined;
  queryParams.reviewStatus = '待审核';
  handleQuery();
};

/** 审核按钮操作 */
const handleReview = (row: AdmissionProcessVO, status: string) => {
  reviewForm.processId = row.processId;
  reviewForm.reviewStatus = status;
  reviewForm.reviewComments = '';
  dialog.title = status === '已通过' ? '通过审核' : '驳回审核';
  dialog.visible = true;
};

/** 提交审核 */
const submitReview = async () => {
  try {
    await reviewFormRef.value?.validate();
    
    await reviewAdmissionProcess(
      reviewForm.processId as string | number,
      reviewForm.reviewStatus,
      reviewForm.reviewComments
    );
    
    proxy.$modal.msgSuccess('审核成功');
    dialog.visible = false;
    getList();
  } catch (error) {
    console.error('审核失败', error);
    proxy.$modal.msgError('审核失败');
  }
};

/** 查看详情 */
const handleDetail = (row: AdmissionProcessVO) => {
  Object.assign(detailForm, row);
  detailDialog.visible = true;
};

onMounted(() => {
  getList();
});
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
